<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="__PUBLIC__/img/favicon.png">

    <title>南牧物联网云平台</title>

    <!-- Bootstrap core CSS -->
    <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">
    <link href="__PUBLIC__/css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="__PUBLIC__/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
	<link href="__PUBLIC__/assets/morris.js-0.4.3/morris.css" rel="stylesheet" />
    <link href="__PUBLIC__/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
    <link rel="stylesheet" href="__PUBLIC__/css/owl.carousel.css" type="text/css">

      <!--right slidebar-->
      <link href="__PUBLIC__/css/slidebars.css" rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href="__PUBLIC__/css/style.css" rel="stylesheet">
    <link href="__PUBLIC__/css/style-responsive.css" rel="stylesheet" />
  </head>

  <body>

	  <div class="row">
			<!-- <div class="col-lg-3 col-md-4">
			  <section class="panel">
				  <div class="list-group">
					<foreach name="houselist" item="vo" key="k">
					  <a class="list-group-item" id="id-house-{$vo.rid}" href="javascript:;" onclick="loadDevice('{$vo.rid}')"><i class="fa fa-th"></i>  {$vo.housename}</a>
					</foreach>
				  </div>
			  </section>
		  </div> -->
		  <div class="col-lg-12 col-md-12">
			  <section class="panel">
				  <header class="panel-heading">
					  设备管理
						<span class="pull-right">
						  <!-- <button type="button" id="loading-btn" class="btn btn-info btn-xs"><i class="fa fa-plus"></i> 增加</button> -->
						  <a href="#id-model" data-toggle="modal" onclick="reset();" class=" btn btn-info btn-xs"> <i class="fa fa-plus"></i>增加设备</a>
					  </span>
				  </header>
				  
				  <div class="panel-body">
					  <div class="row">

						  <div class="col-lg-6 col-md-12">
							  <div class="input-group">
								<input id="id-search" type="text" placeholder="Search Here" class="input-sm form-control"> 
								<span class="input-group-btn"><button onclick="search();" type="button" class="btn btn-sm btn-info"> 搜索!</button> </span>
							  </div>
						  </div>
						  

					  </div>
				  </div>
				  <div class="mybar">
					  <table class="table table-advance table-hover">
						  <thead>
						  <tr>
							  <th>设备名称</th>
							  <th>通讯地址</th>
							  <th>状态</th>
							  <th>设备型号</th>
							  <th>栏舍</th>
							  <th>固件版本</th>
							  <th></th>
						  </tr>
						  </thead>
						  
						  <tbody id='id-table-body'>
						  </tbody>
						  
					  </table>
				  </div>

			  </section>
		  </div>
	  </div>

	
	
	
	<div class="modal fade in " id="id-model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; padding-top:60px">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
				    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				    <h4 class="modal-title">新增设备</h4>
			    </div>
				<div class="modal-body">

							<section class="panel">
								<div class="panel-body">
									<form  id="id-form" role="form">
										<div class="form-group">
										
											<input type="text" class="form-control hidden " name='rid' placeholder="" value="">
											
											<div class="row">
												<label for="input2" class="col-lg-4 control-label">栏舍</label>
												<div class="col-lg-4">
													
													<select class="form-control" name='house' value="" style="width: 100%;">
														<foreach name="houselist" item="vo" key="k">
														<option value="{$vo.rid}">{$vo.housename}</option>
														</foreach>
													</select>
													<p class="help-block"></p>
												</div>
											</div>
											
											<div class="row">
												<label for="input2" class="col-lg-4 control-label">设备名称</label>
												<div class="col-lg-4">
													<input type="text" class="form-control" name='name' placeholder="" value="">
													<p class="help-block"></p>
												</div>
											</div>
											
											<div class="row">
												<label for="input2" class="col-lg-4 control-label">设备地址</label>
												<div class="col-lg-4">
													<input type="text" class="form-control" name='code' placeholder="" value="">
													<p class="help-block"></p>
												</div>
											</div>
											
											<div class="row">
												<label for="input2" class="col-lg-4 control-label">设备类型</label>
												<div class="col-lg-4">
													<select class="form-control" name='type' value="" style="width: 100%;">
														<option value="0" >NM820环控器</option>
														<option value="1" >NM410环控器</option>
														<option value="2" >NM3000料线控制器</option>
														<option value="3" >BW800饲喂器</option>
													</select>
													<p class="help-block"></p>
												</div>
											</div>
									
										</div>
									</form>
								</div>
							</section>

				</div>
				<div class="modal-footer">
				    <button onclick="saveDevice();" type="button" class="btn btn-info">保存设置</button>
			    </div>
			</div>
		</div>
	</div>
	

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="__PUBLIC__/js/jquery.js"></script>
    <script src="__PUBLIC__/js/bootstrap.min.js"></script>
    <script class="include" type="text/javascript" src="__PUBLIC__/js/jquery.dcjqaccordion.2.7.js"></script>
    <script src="__PUBLIC__/js/jquery.scrollTo.min.js"></script>
    <script src="__PUBLIC__/js/jquery.nicescroll.js" type="text/javascript"></script>
	<!-- SlimScroll -->
	<script src="__PUBLIC__/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <script src="__PUBLIC__/js/jquery.sparkline.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
    <script src="__PUBLIC__/js/owl.carousel.js" ></script>
    <script src="__PUBLIC__/js/jquery.customSelect.min.js" ></script>
	<script src="__PUBLIC__/assets/morris.js-0.4.3/morris.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets/morris.js-0.4.3/raphael-min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/js/respond.min.js" ></script>

    <!--right slidebar-->
    <script src="__PUBLIC__/js/slidebars.min.js"></script>
	
	<!--Form Validation-->
    <script src="__PUBLIC__/js/bootstrap-validator.min.js" type="text/javascript"></script>

    <!--Form Wizard-->
    <script src="__PUBLIC__/js/jquery.steps.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/js/jquery.validate.min.js" type="text/javascript"></script>

    <!--common script for all pages-->
    <script src="__PUBLIC__/js/common-scripts.js"></script>
	

	<!--script for this page-->
    <script src="__PUBLIC__/js/jquery.stepy.js"></script>
	<!-- layer -->
	<script src="__PUBLIC__/plugins/layer-v3.0.1/layer/layer.js"></script>

  <script>
	  var select_rid='';
	  
	  
	  var urlstatus='{:u('Index/house')}';
	  var url3000='{:u('Setting/nm3000')}';
	  var url800='{:u('Setting/bw800')}';
	  var url820='{:u('Setting/nm820')}';
	  var url410='{:u('Setting/nm410')}';
	  
	  
      $(document).ready(function() {
		loadDevice('');//加载全部
		initScroll();
      });

	  function loadDevice(rid){
		select_rid=rid;
		
		$('.list-group-item').each(function(){
			$(this).removeClass("active");
		});
		$('#id-house-'+rid).addClass("active");
		$("select[name='house']").val(select_rid);
		
		layer.load();
		$.ajax({
		  type: 'POST',
		  url: "{:u('Setting/loadDevice')}",
		  data: {rid:rid},
		  success: function(data){
			var htmlstr='';
			if(data.length>0){
				for(var i=0;i<data.length;i++){
					var param="'"+data[i].type+"',"+data[i].rid;
					var eidtparam="'"+data[i].name+"',"+"'"+data[i].code+"',"+"'"+data[i].type+"',"+data[i].rid+","+data[i].houseid;
					console.info(eidtparam);
					var onlineStr=(data[i].online==0?"<i class='fa fa-circle text-danger m-r-xs'></i>离线</td>":"<i class='fa fa-circle text-success m-r-xs'></i>在线</td>");
					
					if(data[i].type==='nm3000'){
						htmlstr+="<tr><td><a  href='"+url3000+"?rid="+data[i].rid+"'>"+data[i].name+"</a></td><td>"+data[i].code+"</td><td>"+onlineStr+"</td><td>NM3000料线控制器</td><td>"+data[i].housename+"</td><td>1_1_2017315</td><td> <a href='#' onclick=\"edit("+eidtparam+");\"><span class='label label-info' style='margin:4px'><i class='fa fa-gear'>修改</i></span></a> <a  href='"+url3000+"?rid="+data[i].rid+"'><span class='label label-primary'><i class='fa fa-gear'>设置</i></span></a> <a href='#' onclick=\"deleteDevice("+param+");\"><span class='label label-danger' style='margin:4px'>删除</span></a></td></tr>";
					}
					else if(data[i].type==='bw800'){
						htmlstr+="<tr><td><a  href='"+url800+"?rid="+data[i].rid+"'>"+data[i].name+"</a></td><td>"+data[i].code+"</td><td>"+onlineStr+"</td><td>BW800饲喂器</td><td>"+data[i].housename+"</td><td>1_1_2017315</td><td> <a href='#' onclick=\"edit("+eidtparam+");\"><span class='label label-info' style='margin:4px'><i class='fa fa-gear'>修改</i></span></a> <a  href='"+url800+"?rid="+data[i].rid+"'><span class='label label-primary'><i class='fa fa-gear'>设置</i></span></a><a href='#' onclick=\"deleteDevice("+param+");\"><span class='label label-danger' style='margin:4px'>删除</span></a></td></tr>";
					}
					else if(data[i].type==='nm820'){
						htmlstr+="<tr><td><a  href='"+url820+"?rid="+data[i].rid+"'>"+data[i].name+"</a></td><td>"+data[i].code+"</td><td>"+onlineStr+"</td><td>NM820环控器</td><td>"+data[i].housename+"</td><td>1_1_2017315</td><td> <a href='#' onclick=\"edit("+eidtparam+");\"><span class='label label-info' style='margin:4px'><i class='fa fa-gear'>修改</i></span></a> <a  href='"+url820+"?rid="+data[i].rid+"'><span class='label label-primary '><i class='fa fa-gear'>设置</i></span></a><a href='#' onclick=\"deleteDevice("+param+");\"><span class='label label-danger' style='margin:4px'>删除</span></a></td></tr>";
					}
					else if(data[i].type==='nm410'){
						htmlstr+="<tr><td><a  href='"+url410+"?rid="+data[i].rid+"'>"+data[i].name+"</a></td><td>"+data[i].code+"</td><td>"+onlineStr+"</td><td>NM410环控器</td><td>"+data[i].housename+"</td><td>1_1_2017315</td><td> <a href='#' onclick=\"edit("+eidtparam+");\"><span class='label label-info' style='margin:4px'><i class='fa fa-gear'>修改</i></span></a> <a  href='"+url410+"?rid="+data[i].rid+"'><span class='label label-primary '><i class='fa fa-gear'>设置</i></span></a><a href='#' onclick=\"deleteDevice("+param+");\"><span class='label label-danger' style='margin:4px'>删除</span></a></td></tr>";
					}
				}
			}
			$('#id-table-body').html(htmlstr);
			
		  },
		  error: function (data) {
			alert(data);
		  },
		  complete: function (XHR, TS) {
			layer.closeAll('loading');
		  },
		  dataType: "json"
		});
	  }

	  
	  function edit(name,code,type,rid,houseid){
		$('#id-model').modal('show');//hide model
		console.info(name,code,type,rid,houseid);
		if(rid){
			$("select[name='house']").val(houseid);
			$("input[name='rid']").val(rid);
			$("input[name='name']").val(name);
			$("input[name='code']").val(code);
			var typeValue=0;
			if(type==="nm3000"){typeValue="2";}
			else if(type==="nm820"){typeValue="0";}
			else if(type==="nm410"){typeValue="1";}
			else if(type==="bw800"){typeValue="3";}
			$("select[name='type']").val(typeValue);
		}
	  }
	  
	  function saveDevice(){
		var houseid=$("select[name='house']").val();
		console.info(houseid);
		if(!houseid){
			layer.open({
				title: '提示'
				, content: '请选择栏舍'
			});
			return;
		}
		
		var name=$("input[name='name']").val();
		var code=$("input[name='code']").val();
		//console.info(name,code);
		if(name.length===0||code.length===0){
			layer.open({
				title: '提示'
				, content: '请填写完整设备信息'
			});
			return;
		}
		
		layer.load();
		$.ajax({
			  type: 'POST',
			  url:"{:u('Setting/saveDevice')}",
			  data: $("#id-form").serialize(),
			  success: function(msg){
				if(msg>=0){
					$('#id-model').modal('hide');//hide model
					layer.open({
						title: '成功'
						, content: '保存成功'
					});
					loadDevice('');//加载全部
					
				}else{
					layer.open({
						title: '错误'
						, content: '保存失败'
					});
				}
			  },
			  complete: function(XMLHttpRequest, textStatus) { 
				layer.closeAll('loading');
				
			  },
			  dataType: "text"
		});
	  }
	  
	  function deleteDevice(type,rid){
		console.info(type,rid);
		//询问框
		layer.confirm(
			'您确定要删除该设备？', 
			{btn: ['确认','取消'] }, 
			function(){
			    layer.load();
				$.ajax({
					  type: 'POST',
					  url:"{:u('Setting/deleteDevice')}",
					  data: {rid:rid,type:type},
					  success: function(msg){
						if(msg>=0){
							layer.msg('删除成功', {icon: 1});
							loadDevice('');//加载全部
						}else{
							layer.open({
								title: '错误'
								, content: '删除失败'
							});
						}
					  },
					  complete: function(XMLHttpRequest, textStatus) { 
						layer.closeAll('loading');
						
					  },
					  dataType: "text"
				});
			}, 
			function(){
			    /*layer.msg('也可以这样', {
				    time: 20000, //20s后自动关闭
				    btn: ['明白了', '知道了']
			    });*/
				//layer.msg('的确很重要', {icon: 1});
			}
	    );
	  }
	  
	  function reset(){
		$('#id-form')[0].reset();
		$("select[name='house']").val(select_rid);
	  }
	  
	  function initScroll(){
			var h=$(window).height();
			//出现滚动条
			$(".mybar").slimScroll({
				height:(h-100),
				size: '10px', //组件宽度
				color: '#000', //滚动条颜色
				position: 'right', //组件位置：left/right
				distance: '0px', //组件与侧边之间的距离
				start: 'top', //默认滚动位置：top/bottom
				opacity: .5, //滚动条透明度
				alwaysVisible: false, //是否 始终显示组件
				disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
				railVisible: true, //是否 显示轨道
				railColor: '#333', //轨道颜色
				railOpacity: .2, //轨道透明度
				railDraggable: true, //是否 滚动条可拖动
				railClass: 'slimScrollRail', //轨道div类名 
				barClass: 'slimScrollBar', //滚动条div类名
				wrapperClass: 'slimScrollDiv', //外包div类名
				allowPageScroll: true, //是否 使用滚轮到达顶端/底端时，滚动窗口
				wheelStep: 20, //滚轮滚动量
				touchScrollStep: 200, //滚动量当用户使用手势
				borderRadius: '7px', //滚动条圆角
				railBorderRadius: '7px' //轨道圆角
			});
	  }
	  $(window).resize(function(){
		  initScroll();
	  });

  </script>

  </body>
</html>
